<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { updateProcureApi, getReplenishmentOrderListApi, addReplenishmentOrderApi } from '@/apis/order'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()

interface Props {
  visible: boolean,
  info: any,
  hideBtn: boolean
}

const props = defineProps<Props>()
const emit = defineEmits(['confirm', 'update:visible'])

const list = ref([])

watch(() => props.visible, (val) => {
  if (val && props.info.id) {
    getReplenishmentOrderList(props.info.id)
  }
})

/** 关闭弹窗 */
const handleClose = () => {
  emit('update:visible', false)
}

/** 获取补货信息 */
const getReplenishmentOrderList = async (id) => {
  const data = await getReplenishmentOrderListApi({ id })
  list.value = data.list
}

/** 确定收货 */
const handleConfirm = async () => {
  const res = await updateProcureApi({ ...props.info, status: 2, ch_order_repair: JSON.stringify(list.value) })
  ElMessage.success(res.msg)
  emit('confirm')
  handleClose()
}

/** 异常说明 */
const message = ref('')

/** 添加补货说明 */
const addReissue = async () => {
  if (!message.value) return;
  const repairList = [...list.value, { time: new Date().toLocaleString(), content: message.value, userName: userStore.getUserInfo.nickname }];
  await addReplenishmentOrderApi({
    ch_order_repair: JSON.stringify(repairList),
    id: props.info.id
  })

  message.value = ''
  getReplenishmentOrderList(props.info.id)
}
</script>

<template>
  <el-dialog :model-value="visible" title="商品补发信息" width="500" @close="handleClose" class="reissue-content">

    <!-- 基本信息 -->
    <el-descriptions class="margin-top" title="" :column="2" border>
      <el-descriptions-item label="采购信息" :span="2">{{ info.ch_order_info
      }}</el-descriptions-item>
      <el-descriptions-item label="订单号">{{ info.ch_order_num }}</el-descriptions-item>
      <el-descriptions-item label="快递单号">{{ info.ch_order_track_num }}</el-descriptions-item>
      <el-descriptions-item label="补货说明" :span="2" class-name="custom-content">
        <div v-for="(item, index) in list" :key="index">
          <div class="name">{{ item.time }}</div>
          <div class="content">
            <div>{{ item.userName || '未知用户' }}留言：</div>
            <div>{{ item.content }}</div>
          </div>
        </div>

        <el-input type="textarea" v-model="message" placeholder="请输入异常说明" v-if="!hideBtn"/>
        <!-- 添加补发说明 -->
        <div class="footer" v-if="!hideBtn">
          <el-button type="primary" text @click="addReissue">添加补货说明</el-button>
        </div>

      </el-descriptions-item>
    </el-descriptions>

    <!-- 自定义底部按钮 -->
    <template #footer v-if="!hideBtn">
      <el-button @click="handleClose">取消</el-button>

      <el-button type="primary" @click="handleConfirm">补发完成</el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.reissue-content {
  margin-top: 20px;

  :deep(.el-descriptions__label) {
    display: none;
    width: 100px !important;
  }

  .custom-content {
    .name {
      font-weight: bold;
      color: #000000;
    }

    .content {
      margin-bottom: 10px;
      display: flex;
      justify-content: flex-start;

      .time {
        font-size: 12px;
        color: #999;
      }
    }

    .footer {
      display: flex;
      justify-content: flex-end;
      margin-top: 10px;
    }
  }

}
</style>
